include ../mixins/flash-messages

doctype html
html

	//- HTML HEADER
	head
		meta(charset="utf-8")
		meta(name="viewport", content="width=device-width, initial-scale=1.0")
		meta(http-equiv="X-UA-Compatible" content="IE=edge")

		title= title || 'user_system'
		link(rel="shortcut icon", href="/favicon.ico", type="image/x-icon")

		//- Customise the stylesheet for your site by editing /public/styles/site.less
		//- All .less files will be automatically compiled and minified in production.
		link(href="/styles/site.min.css", rel="stylesheet")

		//- This file provides the default styling for the KeystoneJS Content Editor
		if user && user.canAccessKeystone
			link(href="/keystone/styles/content/editor.min.css", rel="stylesheet")

		//- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries
		//- Safely remove this block if you are not targeting IE8
		//-[if lt IE 9]
			script(src="//cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.js")
			script(src="//cdn.jsdelivr.net/respond/1.4.2/respond.min.js")
		//-[endif]

		//- Include template-specific stylesheets by extending the css block
		block css

		//- Add any other template-specific HEAD tags by extending the head block
		block head

	//- HTML BODY
	body

		//- HEADER
		#header: .container

			//- Customise your site's navigation by changing the navLinks Array in ./routes/middleware.js
			//- ... or completely change this header to suit your design.

			div(role="navigation").navbar.navbar-default
				.container-fluid
					.navbar-header
						button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
							span.sr-only Toggle navigation
							span.icon-bar
							span.icon-bar
							span.icon-bar
						a.navbar-brand(href='/') user_system
					.collapse.navbar-collapse
						ul.nav.navbar-nav.navbar-left
							each link in navLinks
								li(class=(section == link.key ? 'active' : null)): a(href=link.href)= link.label
						ul.nav.navbar-nav.navbar-right
							if user
								if user.canAccessKeystone
									li: a(href='/keystone') Open Keystone
								li: a(href='/keystone/signout') Sign Out
							else
								li: a(href='/keystone/signin') Sign In

		//- BODY
		#body

			//- NOTE:
			//- There is no .container wrapping class around body blocks to allow more flexibility in design.
			//- Remember to include it in your templates when you override the intro and content blocks!

			//- The Intro block appears above flash messages (used for temporary information display)
			block intro

			//- Flash messages allow you to display once-off status messages to users, e.g. form
			//- validation errors, success messages, etc.
			+flash-messages(messages)

			//- The content block should contain the body of your template's content
			block content


		//- FOOTER
		.container: #footer

			//- You don't _have_ to include a link saying your site is powered by KeystoneJS, but we appreciate it!
			p Powered by <a href="http://keystonejs.com" target="_blank">KeystoneJS</a>.


		//- JAVASCRIPT

		//- jQuery 1.11.3 is included by default, and required by both Bootstrap
		//- and the KeystoneJS Content Editor. If you are not targeting IE8,
		//- you can upgrade to 2.1.4 (also bundled) for better performance.
		script(src='/js/jquery/jquery-1.11.3.min.js')

		//- Customise which Bootstrap javascript files are served by including
		//- them specifically here, instead of bootstrap-3.3.5.min.js
		script(src='/js/bootstrap/bootstrap-3.3.5.min.js')

		//- The KeystoneJS Content Editor provides support for ks-editable data attributes,
		//- which generate links to edit content for users who can access Keystone
		if user && user.canAccessKeystone
			script(src='/keystone/js/content/editor.js')

		//- Add scripts that are globally required by your site here.

		//- Include template-specific javascript files by extending the js block
		block js
